<template>
	<view>
		<!-- 订单信息 -->
		<view style="padding: 30rpx;padding-top: 0;background-color: white;">
			<view
				style="padding: 20rpx 0;color: #909399;display: flex;justify-content: space-between;background-color: #F8F8F8;">
				<view>订单信息</view>
				<view style="color: #2979ff;display: flex;align-items: center;" @click="deleteTempOrder()">
					<text style="color: #909399;">订单已暂存</text>
					<text style="margin-left: 20rpx;color: #FA3534;font-weight: bold;">删除</text>
				</view>
			</view>
			<view style="">
				<u-form :model="form" ref="uForm" label-width="auto">
					<u-form-item label="订单类型">
						<u-radio-group v-model="form.appt_type">
							<u-radio v-for="(item, index) in [{value:1,name:'预约订单'},{value:2,name:'出车订单'}]" :key="index"
								:name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="客户类型" v-if="form.appt_type==2">
						<u-radio-group v-model="form.custom_type">
							<u-radio v-for="(item, index) in [{value:1,name:'个人客户'},{value:2,name:'单位客户'}]" :key="index"
								:name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="驾驶员类型" v-if="form.appt_type==2">
						<view style="display: flex;justify-content: flex-end;" @click="show.select_is_new_driver=true">
							<u-picker v-model="show.select_is_new_driver" mode="selector"
								:range="[{value:1,name:'客户本人'},{value:2,name:'自带驾驶员'},{value:3,name:'需配代驾'}]"
								range-key="name" @confirm="(e)=>{
									value1=[{value:1,name:'客户本人'},{value:2,name:'自带驾驶员'},{value:3,name:'需配代驾'}][e[0]].name;
									form.is_new_driver=[{value:1,name:'客户本人'},{value:2,name:'自带驾驶员'},{value:3,name:'需配代驾'}][e[0]].value;
								}"></u-picker>
							<u-input v-model="value1" :disabled="true" placeholder="点击此处选择驾驶员类型" type="select"
								@click="show.select_is_new_driver=true" input-align="right" />
						</view>
					</u-form-item>
					<view v-if="form.appt_type==1">
						<u-form-item label="预约人" prop="appt_name">
							<u-input v-model="form.appt_name" />
						</u-form-item>
						<u-form-item label="预约电话" prop="appt_tel">
							<u-input v-model="form.appt_tel" />
						</u-form-item>
					</view>
					<!-- 客户信息 -->
					<view v-if="form.appt_type==2">
						<view
							style="padding: 20rpx 0;color: #909399;display: flex;justify-content: space-between;background-color: #F8F8F8;">
							<view>客户信息</view>
							<view style="color: #2979ff;display: flex;align-items: center;" @click="toSelectCustomPage">
								<text>选择客户</text>
							</view>
						</view>
						<view v-if="form.custom">
							<u-form-item label="客户姓名" prop="custom.custom_name">
								<view style="display: flex;justify-content: space-between;">
									<u-input v-model="form.custom.custom_name" :disabled="true" />
								</view>
							</u-form-item>
							<u-form-item label="联系电话" prop="custom.custom_tel">
								<view style="display: flex;justify-content: space-between;">
									<u-input v-model="form.custom.custom_tel" :disabled="true" />
								</view>
							</u-form-item>
						</view>
					</view>
					<!-- 驾驶证上传 -->
					<view v-if="form.appt_type==2&&form.custom_type==1&&form.is_new_driver<3">
						<view
							style="padding: 20rpx 0;color: #909399;display: flex;justify-content: space-between;background-color: #F8F8F8;">
							<view>驾驶员信息</view>
							<view style="color: #2979ff;display: flex;align-items: center;" @click="toAddDriver">
								<text>上传驾驶证</text>
							</view>
						</view>
						<view v-if="form.orderDriver">
							<u-form-item label="驾驶员姓名" prop="orderDriver.driver_name">
								<view style="display: flex;justify-content: space-between;">
									<u-input v-model="form.orderDriver.driver_name" :disabled="true" />
								</view>
							</u-form-item>
							<u-form-item label="联系电话" prop="orderDriver.driver_tel">
								<view style="display: flex;justify-content: space-between;">
									<u-input v-model="form.orderDriver.driver_tel" :disabled="true" />
								</view>
							</u-form-item>
						</view>
					</view>

					<!-- 选择代驾 -->
					<view v-if="form.appt_type==2&&form.is_new_driver==3">
						<view
							style="padding: 20rpx 0;color: #909399;display: flex;justify-content: space-between;background-color: #F8F8F8;">
							<view>代驾信息</view>
							<view style="color: #2979ff;display: flex;align-items: center;"
								@click="toSelectSysValetPage">
								<text>选择代驾</text>
							</view>
						</view>
						<view v-if="form.orderValet">
							<u-form-item label="代驾姓名" prop="orderValet.valet_name">
								<view style="display: flex;justify-content: space-between;">
									<u-input v-model="form.orderValet.valet_name" :disabled="true" />
								</view>
							</u-form-item>
							<u-form-item label="联系电话" prop="orderValet.valet_tel">
								<view style="display: flex;justify-content: space-between;">
									<u-input v-model="form.orderValet.valet_tel" :disabled="true" />
								</view>
							</u-form-item>
						</view>
					</view>
					<view
						style="padding: 20rpx 0;color: #909399;display: flex;justify-content: space-between;background-color: #F8F8F8;">
						<view>租赁信息</view>
						<view style="color: #2979ff;display: flex;align-items: center;" @click="toLeaseFormPage">
							<text>填写租赁信息</text>
						</view>
					</view>
					<view style="border-bottom: solid #F8F8F8 1px;">
						<u-form-item label="取车地点" :border-bottom="false">
							<view style="display: flex;justify-content: flex-start;">
								<view>
									<u-input v-model="form.takeReturn1.location_name" placeholder="点击此处选择"
										:disabled="true" input-align="left" />
								</view>
							</view>
						</u-form-item>
						<view v-if="form.takeReturn1.location_address" style="color: #909399;">
							<view>
								{{form.takeReturn1.location_address}}
							</view>
							<view v-if="form.takeReturn1.take_returen_type==1">上门送车</view>
							<view v-if="form.takeReturn1.take_returen_type==2">客户自取</view>
						</view>
					</view>
					<view>
						<u-form-item label="还车地点" :border-bottom="false">
							<view style="display: flex;justify-content: flex-start;">
								<view>
									<u-input v-model="form.takeReturn2.location_name" placeholder="点击此处选择"
										:disabled="true" input-align="left" />
								</view>
							</view>
						</u-form-item>
						<view v-if="form.takeReturn2.location_address" style="color: #909399;">
							<view>
								{{form.takeReturn2.location_address}}
							</view>
							<view v-if="form.takeReturn2.take_returen_type==1">上门收车</view>
							<view v-if="form.takeReturn2.take_returen_type==2">客户送车</view>
						</view>
					</view>
					<!-- 车辆信息 -->
					<view>
						<view
							style="padding: 20rpx 0;color: #909399;display: flex;justify-content: space-between;background-color: #F8F8F8;">
							<view>车辆信息</view>
							<view style="color: #2979ff;display: flex;align-items: center;" @click="toSelectCarPage">
								<text>选择车辆</text>
							</view>
						</view>
						<view v-if="form.carPool">
							<u-form-item label="车牌号" prop="car_num">
								<view style="display: flex;justify-content: space-between;">
									<u-input v-model="form.car_num" :disabled="true" />
								</view>
							</u-form-item>
							<u-form-item label="车型名称" prop="custom_tel">
								<u-input v-model="form.car_type_name" :disabled="true" />
							</u-form-item>
						</view>
					</view>
					<!-- 送车员信息 -->
					<view>
						<view
							style="padding: 20rpx 0;color: #909399;display: flex;justify-content: space-between;background-color: #F8F8F8;">
							<view>送车员信息</view>
							<view style="color: #2979ff;display: flex;align-items: center;"
								@click="toSelectEmployePage">
								<text>选择送车员</text>
							</view>
						</view>
						<view v-if="form.orderEmploye">
							<u-form-item label="车牌号" prop="employe_name">
								<view style="display: flex;justify-content: space-between;">
									<u-input v-model="form.employe_name" :disabled="true" />
								</view>
							</u-form-item>
							<u-form-item label="车型名称" prop="employe_tel">
								<view style="display: flex;justify-content: space-between;">
									<u-input v-model="form.employe_tel" :disabled="true" />
								</view>
							</u-form-item>
						</view>
					</view>
					<!-- 附加服务信息 -->
					<view>
						<view
							style="padding: 20rpx 0;color: #909399;display: flex;justify-content: space-between;background-color: #F8F8F8;">
							<view>附加服务</view>
							<view style="color: #2979ff;display: flex;align-items: center;"
								@click="$refs.selectOrderCharge.show()">
								<text>选择附加服务</text>
							</view>
						</view>
						<view v-if="form.orderChargeIdList">
							<u-form-item label="订单附加服务" prop="orderChargeIdList">
								<view style="display: flex;justify-content: space-between;">
									<text v-if="form.orderChargeIdList&&form.orderChargeIdList.length>0">已选择
										{{form.orderChargeIdList.length}} </text>
									<text v-if="form.orderChargeIdList&&form.orderChargeIdList.length==0">未选择 </text>
								</view>
							</u-form-item>
						</view>
					</view>
					<u-form-item>
						<u-button type="primary" @click="getOrderPayItems">计算费用</u-button>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<myModal ref="myModal"></myModal>
		<checkOrderFee ref="checkOrderFee"></checkOrderFee>
		<selectOrderCharge ref="selectOrderCharge" @select="(e)=>{
			form.orderChargeIdList=e;
		}"></selectOrderCharge>
	</view>
</template>

<script>
	import dateUtils from '../../utils/dateUtils';
	export default {
		data() {
			return {
				deposit_pay: null,
				value1: '',
				show: {
					select_is_new_driver: false
				},
				form: {
					appt_type: 2,
					is_new_driver: 1,
					custom_type: 1,
					custom: null,
					orderDriver: null,
					orderValet: null,
					orderChargeIdList: null
				},
				addForm: {},
				rules: {
					item_name: [{
						required: true,
						message: '请输入名称',
						trigger: ['blur', 'change']
					}],
					item_single_price: [{
						required: true,
						message: '请输入单价',
						trigger: ['blur', 'change']
					}],
					pay_item_usage: [{
						required: true,
						message: '请输入数量',
						trigger: ['blur', 'change']
					}],
					pay_stage: [{
						required: true,
						message: '请选择项目来源',
						trigger: ['blur', 'change']
					}],
					pay_item_check_type: [{
						required: true,
						message: '请选择计费方式',
						trigger: ['blur', 'change']
					}]

				}
			}
		},
		onLoad(options) {
			if (options.deposit_pay) {
				this.deposit_pay = JSON.parse(decodeURIComponent(options.deposit_pay));
			}
		},
		mounted() {
			this.getTempOrderAndInsert();
			var that = this;
			uni.$on('getOrdersInfo', function(data) {
				console.log("监听到了，啦啦啦");
				that.getOrderInfo();
			});
			uni.$on('updateLeaseFrom', function(e) {
				console.log("监听到了。。。");
				console.log(e);
				that.form = Object.assign(that.form, e);
				console.log(that.form);
			});
			this.value1 = '客户本人';
		},
		methods: {
			getOrderPayItems() {
				var that = this;
				var depositPayList = [];
				if (that.deposit_pay) {
					depositPayList.push(that.deposit_pay);
				}
				that.form.depositPayList = depositPayList;
				console.log(that.form.depositPayList);
				that.$http.post('/orders/getOrderPayItems', that.form, (res) => {
					if (res.data.success) {
						that.form = res.data.result;
						that.form.depositPayList = depositPayList;
						that.$refs.checkOrderFee.show(that.form)
					} else {
						that.$refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			deleteTempOrder() {
				var that = this;
				that.$http.get('/orders/deleteById?orders_id=' + that.form.orders_id, {}, (res) => {
					if (res.data.success) {
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						that.$refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			toSelectCustomPage() {
				this.updateOrders();
				uni.navigateTo({
					url: '/pages/selectCustom/selectCustom?orders_id=' + this.form.orders_id
				})
			},
			toAddDriver() {
				this.updateOrders();
				uni.navigateTo({
					url: '/pages/addDriver/addDriver?data=' + encodeURIComponent(JSON.stringify(this.form))
				})
			},
			toSelectSysValetPage() {
				this.updateOrders();
				uni.navigateTo({
					url: '/pages/selectSysyValet/selectSysyValet?orders_id=' + this.form.orders_id
				})
			},
			toLeaseFormPage() {
				this.updateOrders();
				uni.navigateTo({
					url: '/pages/leaseForm/leaseForm?orders_id=' + this.form.orders_id
				})
			},
			updateOrders() {
				var that = this;
				that.$http.post('/orders/update', {
					orders_id: this.form.orders_id,
					appt_type: this.form.appt_type,
					is_new_driver: this.form.is_new_driver,
					custom_type: this.form.custom_type
				}, (res) => {
					if (res.data.success) {} else {
						that.$refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			toSelectCarPage() {
				this.updateOrders();
				uni.navigateTo({
					url: '/pages/selectCar/selectCar?orders_id=' + this.form.orders_id
				})
			},
			toSelectEmployePage() {
				this.updateOrders();
				uni.navigateTo({
					url: '/pages/selectEmploye/selectEmploye?orders_id=' + this.form.orders_id
				})
			},

			getOrderInfo() {
				var that = this;
				that.$http.get('/orders/queryById?orders_id=' + this.form.orders_id, {}, (res) => {
					if (res.data.success) {
						that.form = res.data.result;
					} else {
						that.$refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			getTempOrderAndInsert() {
				var that = this;
				var depositPayList = [];
				if (this.deposit_pay) {
					depositPayList.push(this.deposit_pay);
				}
				that.$http.post('/orders/getTempOrderAndInsert', {
					depositPayList: depositPayList
				}, (res) => {
					if (res.data.success) {
						that.form = res.data.result;
					} else {
						that.$refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			strDateToTime2(take_date, return_date) {
				return dateUtils.strDateToTime2(take_date, return_date);
			},
			strDateToTime(take_date, return_date) {
				return dateUtils.strDateToTime(take_date, return_date);
			},
		},
		onReady() {
			// console.log("ready");
			// console.log(this.$refs.uForm);
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>

</style>